<template>
	<view class="container">
		<view class="header">
			<view class="title">
				{{ driverName }}师傅的邀请
			</view>
			<view class="sub-title">
				加入钱途汇，成为代驾司机。成为Ta下线，您取得收益后，Ta也会获得一定的提成！
			</view>
		</view>
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 手机号输入 -->
			<view class="input-group">
				<text class="label">手机号</text>
				<input v-model="form.phone" type="number" placeholder="请输入手机号" maxlength="11" class="input" @blur="validatePhone" />
				<text class="error-msg">{{ errors.phone }}</text>
			</view>
		
			<!-- 验证码输入 -->
			<view class="input-group">
				<text class="label">验证码</text>
				<view class="code-input-wrapper">
					<input v-model="form.code" type="number" placeholder="请输入验证码" maxlength="4"
						class="input code-input" />
					<button class="get-code-btn" :disabled="countdown > 0 || !canGetCode" @click="getSMSCode">
						{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
					</button>
				</view>
				<text class="error-msg">{{ errors.code }}</text>
			</view>
		
			<!-- 提交 -->
			<button class="login-btn" :disabled="!canSubmit" @tap="submit">
				提交
			</button>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { getSurnameById } from '@/api/user.js'
import { createVerifyCode, register } from '@/api/user.js'

const driverName = ref('')

const form = ref({
	pid: null,
	phone: null,
	code: ''
})
const errors = ref({
	phone: '',
	code: ''
})

const countdown = ref(0)
const timer = ref(null)

let canGetCode = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone)
})

let canSubmit = computed(() => {
	return (/^1[3-9]\d{9}$/.test(form.value.phone)) && (form.value.code.length === 4)
})

// 验证手机号
function validatePhone() {
	if (!form.value.phone) {
		errors.value.phone = '请输入手机号'
	} else if (!/^1[3-9]\d{9}$/.test(form.value.phone)) {
		errors.value.phone = '请输入正确的手机号'
	} else {
		errors.value.phone = ''
	}
}

// 获取短信验证码
function getSMSCode() {
	validatePhone()
	if (errors.value.phone) return

	// 发送验证码
	uni.showLoading({
		title: '发送中...',
		mask: true
	})
	createVerifyCode(form.value.phone).then(res => {
		// 开始倒计时
		startCountdown()
		// 关闭加载
		uni.hideLoading()
		uni.showToast({
			title: '验证码已发送' + res.data,
			icon: 'none'
		})
	}).catch(err => {
		uni.hideLoading()
	})
}

// 开始倒计时
function startCountdown() {
	countdown.value = 60
	timer.value = setInterval(() => {
		if (countdown.value <= 0) {
			clearInterval(timer.value)
			return
		}
		countdown.value--
	}, 1000)
}

// 提交按钮
function submit () {
	if (!canSubmit.value) return
	register({
		phone: form.value.phone,
		verifyCode: form.value.code,
		pid: form.value.pid
	}).then(res => {
		uni.hideLoading()
		uni.showToast({
			title: '提交成功',
			icon: 'none',
			success: () => {
				uni.reLaunch({
					url: '/pages/invite/invite-success'
				})
			}
		})
	}).finally(e => {
		uni.hideLoading()
	})
}

onLoad(e => {
	form.value.pid = e.id
	getSurnameById(e.id).then(res => {
		driverName.value = res.data
	})
})

</script>

<style scoped lang="scss">
* {
	box-sizing: border-box;
}	

.container {
	padding: 30rpx;
	
	.header {
		margin: 80rpx 0 60rpx;
	
		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
		}
		
		.sub-title {
			font-size: 26rpx;
			color: #888;
			margin-top: 20rpx;
		}
		
	}
	
	.form-container {
		.input-group {
			margin-bottom: 40rpx;
	
			.label {
				display: block;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666;
			}
	
			.input {
				height: 88rpx;
				padding: 0 24rpx;
				border-radius: 12rpx;
				border: 2rpx solid #ddd;
				background: #fff;
				font-size: 32rpx;
				&:hover {
					border: 2rpx solid #3f89ff;
				}
			}
	
			.code-input-wrapper {
				display: flex;
	
				.code-input {
					flex: 1;
					margin-right: 20rpx;
				}
	
				.get-code-btn {
					width: 200rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #f0f0f0;
					color: #2979ff;
					font-size: 28rpx;
					padding: 0;
				
					&[disabled] {
						color: #999;
						background: #f5f5f5;
					}
				}
				
			}
	
			.error-msg {
				display: block;
				margin-top: 10rpx;
				color: #f56c6c;
				font-size: 24rpx;
			}
		}
	
		.login-btn {
			margin-top: 60rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 12rpx;
			background: #2979ff;
			color: #fff;
			font-size: 32rpx;
			
			&[disabled] {
				opacity: 0.6;
			}
		}
		
	}
}
</style>